<!--当前位置组件-->
<template>
  <div class="top">
    <div class="column-name">
      <img :src="imageSrc" class="column-image"/>
      <span>{{ currentSubcolumnName }}</span>
    </div>

    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }"
        >首页
        </el-breadcrumb-item
        >
        <el-breadcrumb-item v-if="currentParentName" :to="currentParentPath">
          {{ currentParentName }}
        </el-breadcrumb-item>
        <el-breadcrumb-item
          v-if="currentSubcolumnName"
          :to="currentSubcolumnPath"
        >
          {{ currentSubcolumnName }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  data() {
    return {
      imageSrc: require("@/assets/详情.png"),
    };
  },
  computed: {
    ...mapState(["parentColumns", "subColumns"]),//从vuex中传递过来的父栏目数据和子栏目数据
    //当前父栏目名字
    currentParentName() {
      const currentParent = this.parentColumns.find(
        (parent) => parent.path === `/${this.$route.path.split("/")[1]}`
      );
      return currentParent ? currentParent.column_name : "";
    },
    //当前父栏目路径
    currentParentPath() {
      const currentParent = this.parentColumns.find(
        (parent) => parent.path === `/${this.$route.path.split("/")[1]}`
      );
      return currentParent ? currentParent.path : "";
    },
    //当前子栏目名字
    currentSubcolumnName() {
      const parts = this.$route.path.split("/");
      if (parts.length >= 3) {
        const subPath = `/${parts[1]}/${parts[2]}`;
        const currentSubcolumn = this.subColumns.find(
          (sub) => sub.path === subPath
        );
        return currentSubcolumn ? currentSubcolumn.name : "";
      }
      return "";
    },
    //当前子栏目路径
    currentSubcolumnPath() {
      const parts = this.$route.path.split("/");
      if (parts.length >= 3) {
        return `/${parts[1]}/${parts[2]}`;
      }
      return this.$route.path;
    },
  },
};
</script>


<style scoped>
.top {
  width: 1120px;
  display: flex;
  align-items: center;
  padding-left: 0;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}

.column-name {
  display: flex;
  align-items: center;
  line-height: 33px;
  font-size: 25px;
  padding: 3px;
  padding-bottom: 0px;
  border-bottom: 3px solid #1a64b3;
}

.column-image {
  width: 40px;
  height: 40px;
  object-fit: cover;
  margin-right: 10px;
}

.breadcrumb{
  margin-right: 10px;
}
</style>
